<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./Public/bt/css/bootstrap.min.css">
    <script src="./Public/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            //表单提交事件
            $('form').submit(function () {
                //序列化,可以抓取form里面的所有的内容
                var formData = $(this).serialize();
                //异步
                $.ajax({
                    type:'post',
                    url : 'index.php?c=Arc&a=add',
                    data:formData,
                    dataType:'json',
                    success:function (phpData) {
                        var tr = '';
                        tr +='<tr>';
                        tr += '<td>'+phpData.id+'</td>';
                        tr += '<td>'+phpData.title+'</td>';
                        tr += '<td>'+phpData.content+'</td>';
                        tr += '<td>';
                        tr += '<a href="" class="btn btn-success">编辑</a>';
                        tr += '<a href="" class="btn btn-danger">删除</a>';
                        tr += '</td></tr>';
                        //在页面每次追加一条留言
                        $('.msg').append(tr);
                        //重置form表单,清空表单里面的所有的内容
                        $('form')[0].reset();

                    }
                })
            })
        })

    </script>
</head>
<body>
<div class="container">
    <div class="alert alert-success" role="alert" style="margin-top: 10px">异步添加留言</div>
    <table class="table table-striped msg">
        <tr>
            <td>ID</td>
            <td>标题</td>
            <td>内容</td>
            <td>
                操作
            </td>
        </tr>
        <?php foreach($data as $k => $v): ?>
        <tr>
            <td><?php echo $k ?></td>
            <td><?php echo $v['title'] ?></td>
            <td><?php echo $v['content'] ?></td>
            <td>
                <a href="" class="btn btn-success">编辑</a><a href="" class="btn btn-danger">删除</a>
            </td>
        </tr>
        <?php endforeach ?>
    </table>
    <hr>
    <form action="javascript:;" method="post">
        <div class="form-group">
            <label for="exampleInputEmail1">标题</label>
            <input type="text" class="form-control" id="exampleInputEmail1" name="title">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">内容</label>
            <textarea name="content" id="" cols="30" rows="10" class="form-control"></textarea>
        </div>

        <button type="submit" class="btn btn-info btn-block" style="margin-bottom: 20px">留言</button>
    </form>
</div>






</body>
</html>